<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>视图</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-tabs v-model="activeName"
               @tab-click="tabsclick">
        <el-tab-pane label="来访人员视图"
                     name="来访人员视图">
          <el-row>
            <el-col :span="12">
              <div class="year_visted_container">
                <div class="block">
                  <span>选择年份：</span>
                  <el-date-picker v-model="year"
                                  type="year"
                                  @change="getYearVisitedData"
                                  value-format="yyyy"
                                  placeholder="选择年">
                  </el-date-picker>
                </div>
                <div id="test"
                     style="width: 600px;height:400px;"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <el-col :span="12">
                <div class="choose_dorm">
                  <span>选择楼宇：</span>
                  <el-cascader v-model="value"
                               :options="dorms"
                               @change="getCurYearTowerVisiters"
                               :props="{ expandTrigger: 'hover' }"></el-cascader>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="choose_year">
                  <span>选择年份： </span>
                  <el-date-picker v-model="dormYear"
                                  type="year"
                                  value-format="yyyy"
                                  @change="getCurYearTowerVisiters"
                                  placeholder="选择年">
                  </el-date-picker>
                </div>
              </el-col>
              <div id="data_view_currtower"
                   style="width: 600px;height:400px;"></div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="楼宇年晚归3d视图"
                     name="second">
          <div class="box_block">
            <div class="choose_dorm">
              <span>选择楼宇：</span>
              <el-cascader v-model="value2"
                           :options="dorms"
                           @change="getBCLstudents"
                           :props="{ expandTrigger: 'hover' }"></el-cascader>
            </div>
            <div id="data_view_come_back_late"
                 style="width: 600px;height:470px;"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts-gl'
import { groupByKeys } from 'commonjs/utils.js'
export default {
  name: 'DataStaView',
  props: [''],
  data () {
    return {
      activeName: '来访人员视图',
      data: {
        yearVisited: '',
        currYearTowerVisiters: ''
      },
      // 某年全校来访
      year: '',
      // 某年宿舍来访
      dormYear: '',
      value: [],
      value2: [],
      BCLdata: [],
      dorms: [
        {
          value: 'taoyuan',
          label: '桃园',
          children: [
            {
              value: '桃园1',
              label: '桃园1'
            },
            {
              value: '桃园2',
              label: '桃园2'
            },
            {
              value: '桃园3',
              label: '桃园3'
            },
            {
              value: '桃园4',
              label: '桃园4'
            },
            {
              value: '桃园5',
              label: '桃园5'
            },
            {
              value: '桃园6',
              label: '桃园6'
            }
          ]
        },
        {
          value: 'lanyuan',
          label: '兰园',
          children: [
            {
              value: '兰园1',
              label: '兰园1'
            },
            {
              value: '兰园2',
              label: '兰园2'
            },
            {
              value: '兰园3',
              label: '兰园3'
            },
            {
              value: '兰园4',
              label: '兰园4'
            },
            {
              value: '兰园5',
              label: '兰园5'
            },
            {
              value: '兰园6',
              label: '兰园6'
            }
          ]
        },
        {
          value: 'liyuan',
          label: '荔园',
          children: [
            {
              value: '荔园1',
              label: '荔园1'
            },
            {
              value: '荔园2',
              label: '荔园2'
            },
            {
              value: '荔园3',
              label: '荔园3'
            },
            {
              value: '荔园4',
              label: '荔园4'
            },
            {
              value: '荔园5',
              label: '荔园5'
            },
            {
              value: '荔园6',
              label: '荔园6'
            }
          ]
        }
      ]
    }
  },
  created () {
    this.getYearVisitedData()
    this.getCurYearTowerVisiters()
  },
  updated () {
    // console.log(this.data)
    setTimeout(() => {
      const myChart = echarts.init(document.getElementById('test'))
      const option = this.data.yearVisited.option
      // console.log(option)
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }, 500)
    this.dataviewcurrtower()
  },
  methods: {
    async getYearVisitedData () {
      const { data: res } = await this.$axios.get('/visit/allVisiters', {
        params: {
          Syear: this.year ? this.year + '-01' : new Date().getFullYear() + '-01',
          // Eyear: '2019-12-31 24:00:00'
          Eyear: this.year ? this.year + '-12-31 24:00' : new Date().getFullYear() + '-12-31 24:00'
        }
      })
      // console.log(res)
      if (res.meta.code !== 200) return
      this.data.yearVisited = res
      // console.log(this.data.yearVisited)
    },
    // 获取当前宿舍的某年每月来访人数
    async getCurYearTowerVisiters () {
      // console.log(this.value)
      const { data: res } = await this.$axios.get('/visit/curTowerVisiters', {
        params: {
          Syear: this.dormYear ? this.dormYear + '-01' : new Date().getFullYear() + '-01',
          // Eyear: '2019-12-31 24:00:00'
          Eyear: this.dormYear ? this.dormYear + '-12-31 24:00' : new Date().getFullYear() + '-12-31 24:00',
          tower: this.value.length ? this.value[1] : window.localStorage.getItem('tower')
        }
      })
      if (res.meta.code !== 200) return
      this.data.currYearTowerVisiters = res
      // console.log(this.data.currYearTowerVisiters)
    },
    async getBCLstudents () {
      const { data: res } = await this.$axios.get('/tower/findCBlate', {
        params: {
          tower: this.value2.length ? this.value2[1] : window.localStorage.getItem('tower')
        }
      })
      console.log(res)
      if (res.meta.code === 200) {
        this.BCLdata = res.studentlist
        this.drewBCLview()
      }
    },
    // 绘制来访人图
    dataviewcurrtower () {
      const myChart1 = echarts.init(document.getElementById('data_view_currtower'))
      const { option } = this.data.currYearTowerVisiters
      // console.log(option)
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option)
    },
    // 绘制晚归图
    drewBCLview () {
      const myChart3 = echarts.init(document.getElementById('data_view_come_back_late'))
      let data = []
      this.BCLdata.map(valid => {
        let data1 = {}
        data1.year = valid.BCLtime.slice(0, 4)
        data1.month = valid.BCLtime.slice(5, 7)
        data.push(data1)
        data1 = {}
      })
      data = groupByKeys(data, ['year', 'month'])
      const data1 = [
        ['2000', 1, 0],
        ['2000', 2, 0],
        ['2000', 3, 0],
        ['2000', 4, 0],
        ['2000', 5, 0],
        ['2000', 6, 0],
        ['2000', 7, 0],
        ['2000', 8, 0],
        ['2000', 9, 0],
        ['2000', 10, 0],
        ['2000', 11, 0],
        ['2000', 12, 0]
      ]
      let temp = []
      data.forEach(valid => {
        temp.push(valid[0].year)
        temp.push(parseInt(valid[0].month))
        temp.push(valid.length)
        data1.push(temp)
        temp = []
      })
      console.log('data1', data1)
      const option = {
        grid3D: {},
        tooltip: {},
        title: {
          show: true,
          text: this.BCLdata[0].tower + '每年晚归人数统计'
        },
        visualMap: {
          max: 10,
          dimensions: 'count',
          inRange: {
            color: ['#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          }
        },
        xAxis3D: {
          type: 'category',
          name: '年份'
        },
        yAxis3D: {
          type: 'category',
          name: '月份',
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#513458'
            }
          }
        },
        zAxis3D: {
          name: '迟归人数'
        },
        dataset: {
          dimensions: [
            'year',
            { name: 'month', type: 'ordinal' },
            'count'
          ],
          source: data1
        },
        series: [
          {
            type: 'bar3D',
            // symbolSize: symbolSize,
            shading: 'lambert',
            encode: {
              x: 'year',
              y: 'month',
              z: 'count'
            },
            bevelSize: 0.5,
            itemStyle: {
              color: '#cb3b3b'
            },
            emphasis: {
              itemStyle: {
                color: '#b22222'
              }
            }
          }
        ]
      }
      myChart3.setOption(option)
      /**
      data1.forEach(year => {
        console.log(year[0])
        if (years.indexOf(year[0]) === -1) {
          years.push(year[0])
        }
      })
      console.log(years)
      const mounths = [
        { Jan: '01' },
        { Feb: '02' },
        { Mar: '03' },
        { Apr: '04' },
        { May: '05' },
        { Jun: '06' },
        { Jul: '07' },
        { Aug: '08' },
        { Sep: '09' },
        { Oct: '10' },
        { Nov: '11' },
        { Dec: '12' }
      ]
      years.forEach(item => {
      })
       */
    },
    tabsclick (tab) {
      if (tab.index === '1') {
        this.getBCLstudents()
      }
    }
  },
  watch: {
    // 每年来访人员视图更新
    'data.yearVisited': {
      handler (newData, preData) {
        // console.log('旧数据', preData)
        // console.log('新数据', newData)
        if (newData) {
          this.data.yearVisited = newData
          var newchart = echarts.init(document.getElementById('test'))
          newchart.setOption(this.data.yearVisited.option)
        } else {
          this.data.yearVisited = preData
          var oldchart = echarts.init(document.getElementById('test'))
          oldchart.setOption(this.data.yearVisited.option)
        }
      }
    },
    'data.currYearTowerVisiters': {
      handler (newData, preData) {
        // console.log('旧数据', preData)
        // console.log('新数据', newData)
        if (newData) {
          this.data.currYearTowerVisiters = newData
          this.dataviewcurrtower()
        } else {
          if (preData) {
            this.data.currYearTowerVisiters = preData
            this.dataviewcurrtower()
          }
        }
      }
    }
  }
}

</script>
<style lang='less' scoped>
.year_visted_container {
  .block {
    margin-bottom: 30px;
  }
}
#data_view_currtower {
  position: absolute;
  top: 70px;
}
.box_block {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
</style>
